<template>
  <div class="login-container">
    <el-form ref="loginAccount" :model="account" :rules="rules" label-width="70px" class="login-form">
      <h2 style="text-align: center;">用户登录</h2><br>
      <el-form-item label="用户名">
        <el-input v-model="account.aname"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="account.apassword" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login()">登录</el-button>
        <el-button type="danger" @click="register()">去注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      account: {
        aname:'',
        apassword:''
      },
      loginForm: {
        aname: '',
        apassword: ''
      },
      rules: {
        aname: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        apassword: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
    },
  methods: {
    register(){
      this.$router.push("/register");
    },
    login() {
      this.$axios.post("auth/login", this.account)
        .then((result) => {
          let vo = result.data;
          this.$message(vo.message);
          if (vo.code == 200) {
            let loginAccount = vo.data;
            let jsonStr = JSON.stringify(loginAccount);
            localStorage.setItem("loginAccount", jsonStr);
            this.$router.push("/main");
          }
        }).catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height: 100vh;
  background-color: #f0f2f5;
  background-image: url('../img/R-C.jpg');
  /* 添加背景图片 */
  background-size: cover;
  /* 确保图片铺满整个屏幕 */
  background-position: center;
  background-repeat: no-repeat;
}

.login-form {

  width: 300px;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>